<template>
    <div class="Login">
        <div class="Nav">
            <van-icon name="cross" @click="back" />
            <div class="title">登录</div>
        </div>
        <!-- 登录 -->
        <div class="from-box">
            <van-form @submit="Login">
                <van-field v-model="userInfoLogin.phone" name="phone" label="手机号" placeholder="请输入手机号" autocomplete="off" :rules="[{ required: true, message: '' }]" />
                <van-field v-model="userInfoLogin.password" type="password" name="password" label="密码" placeholder="请输入密码" autocomplete="off" :rules="[{ required: true, message: '' }]" />
                <div style="margin: 16px">
                    <van-button color="green" round block type="info" native-type="submit">登录</van-button>
                </div>
            </van-form>
            <div class="forget-register">
                <div class="forget">忘记密码</div>
                <div class="register" @click="clickRegister">手机号注册</div>
            </div>
        </div>
        <!-- 注册 -->
        <van-popup v-model="show" position="bottom" :style="{ height: '50%' }" :round="true" closeable>
            <div class="from-box">
                <van-form @submit="register">
                    <van-field v-model="userInfoRegister.phone" name="phone" label="手机号" placeholder="请输入手机号" autocomplete="off" :rules="[{ required: true, message: '' }]" />
                    <van-field
                        v-model="userInfoRegister.password"
                        type="password"
                        name="password"
                        label="密码"
                        placeholder="请输入密码"
                        autocomplete="off"
                        :rules="[{ required: true, message: '' }]"
                    />
                    <div style="margin: 16px">
                        <van-button color="green" round block type="info" native-type="submit" @click="clickregister">注册</van-button>
                    </div>
                </van-form>
            </div>
        </van-popup>
        <!-- 其他登录方式 -->
        <div class="LoginMethod">
            <img src="../assets/images/login_icon_weixin.png" />
            <img src="../assets/images/login_icon_weibo.png" />
            <img src="../assets/images/login_icon_mail_black.png" />
        </div>
        <!-- 勾选协议 -->
        <div class="agreement">
            <van-checkbox v-model="checked" checked-color="green"></van-checkbox>
            <div class="text">您已同意"<span>服务条款</span>、""<span>隐私政策</span>"和"<span>网易云阅读儿童个人信息保护规则及监护人须知</span>"</div>
        </div>
    </div>
</template>

<script>
import { Toast } from "vant";
export default {
    name: "Login",
    data() {
        return {
            // 登录数据
            userInfoLogin: {
                phone: "",
                password: "",
            },
            // 注册数据
            userInfoRegister: {
                phone: "",
                password: "",
            },
            username: "",
            password: "",
            checked: false,
            show: false,
            // 注册信息列表
            registerMsgList: [],
        };
    },
    methods: {
        back() {
            this.$router.back();
        },
        // 点击登录按钮
        Login(value) {
            // 保存登录信息
            this.userInfoLogin = value;
            // 判断是否存在注册信息 如果有再判断手机号与密码,没有就提示
            if (JSON.parse(localStorage.getItem("userMsg"))) {
                // 判断手机号与密码是否都与注册信息相同
                if (this.userInfoLogin.phone == JSON.parse(localStorage.getItem("userMsg")).phone && this.userInfoLogin.password == JSON.parse(localStorage.getItem("userMsg")).password) {
                    Toast.success("登录成功");
                    this.$router.push({
                        name: "Bookstore",
                    });
                    // 登录成功标识符
                    localStorage.setItem("isLogined", true);
                    // 如果手机号不同
                } else if (this.userInfoLogin.phone !== JSON.parse(localStorage.getItem("userMsg")).phone) {
                    Toast.fail("该用户未注册");
                } else if (this.userInfoLogin.password !== JSON.parse(localStorage.getItem("userMsg")).password) {
                    Toast.fail("密码错误");
                }
            } else {
                Toast.fail("该用户未注册");
            }
        },
        // 点击注册按钮
        register(value) {
            // 保存注册信息
            this.userInfoRegister = value;
            this.userInfoRegister;

            // 将信息存入本地
            // 如果已经注册
            if (JSON.parse(localStorage.getItem("userMsg"))) {
                // 手机号相同
                if (this.userInfoRegister.phone == JSON.parse(localStorage.getItem("userMsg")).phone) {
                    Toast.fail("该手机号已经注册过");
                } else {
                    // 手机号不同
                    localStorage.setItem("userMsg", JSON.stringify(this.userInfoRegister));
                    Toast.success("注册成功");
                }
            } else {
                // 没有注册信息
                localStorage.setItem("userMsg", JSON.stringify(this.userInfoRegister));
                Toast.success("注册成功");
                this.show = false;
            }
        },
        // 弹出注册
        clickRegister() {
            this.show = true;
        },
        // 收起注册
        clickregister() {
            this.show = false;
        },
    },
};
</script>

<style lang="less" scoped>
.Login {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    .agreement {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin: 20px 0 0 0;
        .van-checkbox {
            margin: 0 -20px 0 0;
        }
        .text {
            width: 292px;
            font-size: 14px;
            span {
                color: blue;
            }
        }
    }
    .LoginMethod {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin: 220px 0 0 0;
        img {
            width: 35px;
            height: 35px;
        }
    }
    .from-box {
        margin: 80px 0 0 0;
        .forget-register {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .forget {
                margin: 0 0 0 25px;
                font-size: 14px;
                color: #686969;
            }
            .register {
                margin: 0 25px 0 0px;
                font-size: 14px;
                color: #e4393c;
            }
        }
        .van-cell {
            width: 85%;
            border-radius: 30px;
            border: 1px solid #686969;
            margin: 20px auto;
            ::v-deep {
                .van-field__label {
                    margin-right: -35px;
                }
            }
        }
    }
    .Nav {
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #dcdddd;
        .van-icon-cross {
            font-size: 20px;
            color: #686969;
            margin: 0 140px 0 15px;
        }
        .title {
            font-size: 18px;
        }
    }
}
</style>
